<template>
	<div>
		<div class="table-contain">
			<a-table :columns="columns" :data-source="spearEntities" :rowKey="data => data.id"
			         :loading="loading" :pagination="false" :scroll="{x: 1300}">
				<template slot="chargePower" slot-scope="data">
					{{ data.chargePower }}KW
				</template>
				<template slot="power" slot-scope="data">
					{{ data.power ? data.power + 'KW' : '--' }}
				</template>
				<template slot="current" slot-scope="data">
					{{ data.current ? data.current + 'A' : '--' }}
				</template>
				<template slot="voltage" slot-scope="data">
					{{ data.voltage ? data.voltage + 'V' : '--' }}
				</template>
				<template slot="status" slot-scope="data">
					<a-tag :color="data.status == 1 ? '#2db7f5' : (data.status == 2 ? '#108ee9' : '#f50')">
						{{ data.status == 1 ? '空闲' : (data.status == 2 ? '使用' : '离线') }}
					</a-tag>
				</template>
				<template slot="createTime" slot-scope="data">
					{{ moment ( data.createTime ).format ( 'YYYY-MM-DD' ) }}
				</template>
				<template slot="status" slot-scope="data">
					<a-tag :color="data.status == 1 ? 'blue' : (data.status == 2 ? 'green' : 'red')">
						{{data.status == 1 ? '空闲' : (data.status == 2 ? '使用' : '离线')}}
					</a-tag>
				</template>
				<template slot="action" slot-scope="data">
					<a-icon type="edit" class="icon-box" style="margin-right: 10px"
					        @click.stop="editSpear(data.id)"/>
					<a-icon type="delete" class="icon-box" style="margin-right: 10px" @click.stop="deleteStation(data.id)"/>
					<a-icon type="tool" class="icon-box" @click.stop="setStatus(data)"/>
				</template>
			</a-table>
		</div>
		<div class="page-box">
			<a-pagination
				size="small"
				:showQuickJumper="true"
				:showSizeChanger="true"
				:current="page.current"
				:pageSize="page.pageSize"
				:total="total"
				:show-total="(total) => `共${total}条`"
				@showSizeChange="onShowSizeChange"
				@change="changePageSize"
			></a-pagination>
		</div>
	</div>
</template>

<script>
import moment from "moment";
import {api, post} from "@/api/api";

export default {
	name: "SpearTable",
	props: {
		spearEntities: {
			type: Array,
			default: null
		},
		total: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			loading: true,
			columns: [
				{title: '枪名称', dataIndex: 'spearName', key: 'spearName', width: 200, ellipsis: true, fixed: 'left'},
				{title: '枪编号', dataIndex: 'spearNumber', key: 'spearNumber', width: 150,},
				{title: '充电功率', scopedSlots: {customRender: 'power'}, width: 150},
				{title: '电流', scopedSlots: {customRender: 'current'}, width: 150},
				{title: '电压', scopedSlots: {customRender: 'voltage'}, width: 150},
				{title: '状态', scopedSlots: {customRender: 'status'}, width: 150},
				{title: '所属桩体', dataIndex: 'pileName', key: 'pileName', width: 250},
				{title: '所属电站', dataIndex: 'stationName', key: 'stationName', width: 300},
				{title: '投运时间', scopedSlots: {customRender: 'createTime'}, width: 120},
				{title: '状态', scopedSlots: {customRender: 'status'}, width: 150},
				{title: '操作', dataIndex: '', key: 'x', scopedSlots: {customRender: 'action'}, width: 120, fixed: 'right'},
			],
			page: {
				current: 1,
				pageSize: 20,
			},
			moment,
		}
	},
	watch: {
		spearEntities( value ) {
			this.loading = false
		},
	},
	methods: {
		editSpear(id){
			this.$emit('edit', id)
		},
		setStatus(spear){
			this.$emit('status', spear)
		},
		onShowSizeChange( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.$emit('changePage', {page: current, pageSize: pageSize})
		},
		changePageSize( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.$emit('changePage', {page: current, pageSize: pageSize})
		},
	}
}
</script>

<style scoped>

</style>
